<template>
    <div class="classify">
        <!-- 所以种类 -->
        <ul v-if="AllLabel.styles" class="styles">
            <li :class="stylesindex == -1 ? 'active' : ''" @click.stop="changeStylesAll">全部</li>
            <li
                :class="stylesindex == index ? 'active' : ''"
                @click.stop="changeStyles(index, styles.id)"
                v-for="(styles, index) in AllLabel.styles"
                :key="styles.id"
            >
                {{ styles.name }}
            </li>
        </ul>
        <!-- 地区 -->
        <ul v-if="AllLabel.areas" v-show="showlist">
            <li :class="areasindex == -1 ? 'active' : ''" @click.stop="changeAreaAll">全部</li>
            <li
                :class="areasindex == index ? 'active' : ''"
                @click.stop="changeArea(index, areas.id)"
                v-for="(areas, index) in AllLabel.areas"
                :key="areas.id"
            >
                {{ areas.name }}
            </li>
        </ul>
        <!-- 状态 -->
        <ul v-if="AllLabel.status" v-show="showlist">
            <li :class="statusindex == -1 ? 'active' : ''" @click.stop="changeStatusAll">全部</li>
            <li
                :class="statusindex == index ? 'active' : ''"
                @click.stop="changeStatus(index, status.id)"
                v-for="(status, index) in AllLabel.status"
                :key="status.id"
            >
                {{ status.name }}
            </li>
        </ul>
        <!-- 免费 付费-->
        <ul v-if="AllLabel.prices" v-show="showlist">
            <li :class="pricesindex == -1 ? 'active' : ''" @click.stop="changePricesAll">全部</li>
            <li
                :class="pricesindex == index ? 'active' : ''"
                @click.stop="changePrices(index, prices.id)"
                v-for="(prices, index) in AllLabel.prices"
                :key="prices.id"
            >
                {{ prices.name }}
            </li>
        </ul>
        <!-- 介绍 -->
        <ul v-if="AllLabel.orders">
            <li
                :class="ordersindex == index ? 'active' : ''"
                @click.stop="changeorders(index, orders.id)"
                v-for="(orders, index) in AllLabel.orders"
                :key="orders.id"
            >
                {{ orders.name }}
            </li>
            <span v-show="showlist" class="iconfont icon-shang" @click="showlist = !showlist">
                筛选</span
            >
            <span v-show="!showlist" class="iconfont icon-xia" @click="showlist = !showlist">
                筛选</span
            >
        </ul>
        <div v-if="ClassPage">
            <classify-list :classifylist="ClassPage"></classify-list>
        </div>
        <div class="loading" v-if="loading">
            <van-loading size="24px" vertical text-color="#0094ff" color="#0094ff"
                >加载中...</van-loading
            >
        </div>
        <div v-if="none" class="none">
            <img src="../assets/images/period.png" alt="" />
        </div>
    </div>
</template>

<script>
import _ from "lodash";
import ClassifyList from "@/components/ClassifyList.vue";
export default {
    components: { ClassifyList },
    data() {
        return {
            AllLabel: [],
            ClassPage: [],
            stylesindex: -1,
            areasindex: -1,
            statusindex: -1,
            pricesindex: -1,
            ordersindex: 0,
            showlist: false,
            none: false,
            loading: true,
            page: 1,
            style_id: -1,
            area_id: -1,
            is_finish: -1,
            is_free: -1,
            order: 0,
        };
    },
    created() {
        this.getAllLabel();
        this.getClassPage();
    },

    mounted() {
        window.addEventListener("scroll", this.windowScroll);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.windowScroll);
    },
    methods: {
        async getAllLabel() {
            await this.axios.get("AllLabel").then((res) => {
                this.AllLabel = res;
            });
        },
        async getClassPage(offset = 39) {
            await this.axios
                .get(
                    `ClassPage?styleId=${this.style_id}&areaId=${this.area_id}&isFinish=${this.is_finish}&order=${this.order}&isFree=${this.is_free}&pageNum=1&pageSize=${offset}`
                )
                .then((res) => {
                    this.none = false;
                    this.loading = false;
                    this.ClassPage = res;
                    if (this.ClassPage.length == 0) {
                        this.none = true;
                    }
                });
        },
        loadmore() {
            this.page++;
            this.loading = true;
            let offset = this.page * 39;
            this.getClassPage(offset);
        },
        windowScroll: _.throttle(function () {
            //卷去的距离
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

            scrollTop = Math.ceil(scrollTop);
            //页面的高度
            let contentHight = document.body.scrollHeight;
            //窗口内容的高度
            let clientHeight = window.innerHeight;
            if (scrollTop + clientHeight >= contentHight) {
                this.loadmore();
            }
        }, 300),

        changeStylesAll() {
            this.loading = true;
            this.stylesindex = -1;
            this.style_id = -1;
            this.getClassPage(); //数据重新渲染
        },
        changeStyles(index, id) {
            this.loading = true;
            this.stylesindex = index;
            this.style_id = id;
            this.ClassPage = [];
            this.getClassPage();
        },
        changeAreaAll() {
            this.loading = true;
            this.areasindex = -1;
            this.area_id = -1;
            this.ClassPage = [];
            this.getClassPage();
        },
        changeArea(index, id) {
            this.loading = true;
            this.areasindex = index;
            this.area_id = id;
            this.ClassPage = [];
            this.getClassPage();
        },
        changeStatusAll() {
            this.loading = true;
            this.statusindex = -1;
            this.is_finish = -1;
            this.ClassPage = [];
            this.getClassPage();
        },
        changeStatus(index, id) {
            this.loading = true;
            this.statusindex = index;
            this.is_finish = id;
            this.ClassPage = [];
            this.getClassPage();
        },
        changePricesAll() {
            this.loading = true;
            this.pricesindex = -1;
            this.is_free = -1;
            this.ClassPage = [];
            this.getClassPage();
        },
        changePrices(index, id) {
            this.loading = true;
            this.pricesindex = index;
            this.is_free = id;
            this.ClassPage = [];
            this.getClassPage();
        },
        changeorders(index, id) {
            this.loading = true;
            this.ordersindex = index;
            this.order = id;
            this.ClassPage = [];
            this.getClassPage();
        },
    },
};
</script>

<style lang="scss" scoped>
.classify {
    padding: 10px 16px 0;
    .styles {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        li {
            display: inline-block;
            font-size: 12px;
            color: #6c727e;
            margin: 6px 0;
            padding: 2px 10px;
            cursor: pointer;
        }
        .active {
            color: #fb7299;
        }
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        li {
            display: inline-block;
            font-size: 12px;
            color: #6c727e;
            margin: 6px 0;
            padding: 2px 10px;
            cursor: pointer;
        }
        .active {
            color: #fb7299;
        }
        span {
            position: absolute;
            font-size: 12px;
            color: #6c727e;
            line-height: 34px;
            right: 0;
        }
    }
    .loading {
        padding-top: 20px;
        padding-bottom: 50px;
    }
    .none {
        position: relative;
        left: 0;
        right: 0;
        top: 100px;
        text-align: center;
    }
}
</style>
